<template>
  <div :class="isMobile ? '' : 'login'">
    <template v-if="isMobile">
      <MobileLogin :loginInfo="this.loginInfo" :login="this.login" />
    </template>

    <div v-else>
      <!-- <el-row type="flex" class="row-bg" justify="between">
        <el-col :span="9"></el-col>
        <el-col :span="6"> -->
      <div class="form-box">
        <div class="brand"></div>
        <form class="login-form">
          <div class="flex-row">
            <label class="lf--label" for="username">
              <i class="fa fa-user info"></i>
            </label>
            <input
              v-model="loginInfo.username"
              id="username"
              class="lf--input"
              placeholder="用户名"
              type="text"
              ref="username"
              v-on:keyup.enter="nextInput('password')"
            />
          </div>
          <div class="flex-row">
            <label class="lf--label" for="password">
              <i class="fa fa-unlock info"></i>
            </label>
            <input
              v-model="loginInfo.password"
              id="password"
              class="lf--input"
              placeholder="密码"
              type="password"
              v-on:keyup.enter="login"
              ref="password"
            />
          </div>
          <div class="flex-row" v-show="loginInfo.requiredCaptcha">
            <el-row class="row-bg" justify="left">
              <el-col :span="12">
                <input
                  v-model="loginInfo.captcha"
                  id="captcha"
                  style="margin-right: 80px;"
                  class="lf--input"
                  placeholder="验证码"
                  v-if="loginInfo.requiredCaptcha"
                  v-on:keyup.enter="login"
                />
              </el-col>
              <el-col :span="12">
                <img
                  style="width: 80%;float:right; height: 50px;"
                  title="点击刷新"
                  ref="img"
                  @click="reloadCaptcha()"
                  v-show="loginInfo.requiredCaptcha"
                />
              </el-col>
            </el-row>
          </div>
          <el-button
            style="border-radius: 0px;"
            class="lf--submit"
            @click.prevent="login"
            @keyup.enter.native="login"
            :loading="$store.state.auth.loading"
            id="pc"
          >
            {{m("login")}}
          </el-button>
          <!--
          <el-checkbox v-model="loginInfo.remember" class="lf--remember"
            >记住登录信息</el-checkbox
          >
          -->
          <!--
            <el-checkbox v-model="loginInfo.merchant" class="lf--remember"
              >外部用户</el-checkbox
            >
            -->
        </form>
      </div>
      <!-- </el-col>
        <el-col :span="9"></el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script>
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
import * as cookie from "@/store/yg/common/cookie";
import MobileLogin from "./MobileLogin";

export default {
  components: {
    MobileLogin
  },
  data() {
    return {
      captcha: "",

      loginInfo: {
        remember: false,
        merchant: false,
        requiredCaptcha: false,
        captcha: "",
        username: "",
        password: ""
      }
    };
  },
  watch: {
    loginInfo: {
      deep: true,
      immediate: true,
      handler: function(newVal, oldVal) {
        if (newVal.merchant) {
          this.initLoginData();
        }
      }
    }
  },
  computed: {
    captchaJpg() {
      return constant.API_SERVER + "/lib/images/kaptcha.jpg";
    },
    isMobile() {
      return navigator.userAgent.indexOf("Mobile") > 0;
    }
  },
  methods: {
    m(k) {
      return m(k);
    },
    nextInput(ref) {
      this.$refs[ref].focus();
    },
    showCaptcha() {
      return this.loginInfo.requiredCaptcha;
    },
    login(ev) {
      ev.target.blur();
      if (this.$store.state.auth.loading) {
        return false;
      }

      if (!this.loginInfo.username) {
        this.$notify({ message: "请输入用户名", type: "error" });
        return;
      }
      if (!this.loginInfo.password) {
        this.$notify({ message: "请输入密码", type: "error" });
        return;
      }
      if (this.showCaptcha() && !this.loginInfo.captcha) {
        this.$notify({ message: "请输入验证码", type: "error" });
        return;
      }
      this.$store.state.auth.loading = true;
      var user = {};

      user["loginName"] = this.loginInfo.username;
      user["password"] = this.loginInfo.password;
      user["captcha"] = this.loginInfo.captcha;
      user["remember"] = this.loginInfo.remember;
      user["merchant"] = this.loginInfo.merchant;
      if (this.loginInfo.locale) {
        user["locale"] = this.loginInfo.locale;
      }

      this.$store.dispatch("loginAuth", {
        user: user,
        callafter: this.showError,
        callback: this.reloadCaptcha
      });
      this.storeLoginData(ev);

      return false;
    },
    showError(res) {
      if (res.code != "200") {
        this.$notify({ message: this.m(res.message), type: "error" });
      }
    },
    reloadCaptcha() {
      var newImg = new Image();
      var self = this;
      newImg.onload = function() {
        if (this.width) {
          self.loginInfo.requiredCaptcha = true;
          if (self.$refs.img) {
            self.$refs.img.src = this.src;
          }
        }
      };
      newImg.src = this.captchaJpg + "?" + Math.random();
      this.loginInfo.captcha = "";
    },
    m(k) {
      return m(k);
    },
    initLoginPassword(res) {
      if (res && res.password) {
        this.loginInfo.password = res.password;
      }
    },
    initLoginData() {
      if (cookie.getCookie("username")) {
        this.loginInfo.username = cookie.getCookie("username");
      }
      if (cookie.getCookie("remember")) {
        this.loginInfo.remember = eval(cookie.getCookie("remember"));
      }
      if (this.loginInfo.username && this.loginInfo.remember) {
        var user = {
          loginName: this.loginInfo.username,
          merchant: this.loginInfo.merchant
        };
        /*
        this.$store.dispatch("rememberPassword", {
          user: user,
          callback: this.initLoginPassword
        });
        */
      }
    },
    storeLoginData(ev) {
      if (this.loginInfo.remember) {
        cookie.setCookie("username", this.loginInfo.username, 120);
      } else {
        cookie.delCookie("username");
      }
      cookie.setCookie("remember", this.loginInfo.remember, 120);
      if (ev && ev.target && ev.target.id) {
        localStorage.loginMode = ev.target.id;
      }
    }
  },
  created() {
    var messages = localStorage.messages;
    let locale = "";
    if (localStorage.user) {
      let user = JSON.parse(localStorage.user);
      let nav = localStorage.nav;
      let userNav = {};
      userNav[user.loginName] = nav;
      if (user.locale) {
        locale = user.locale;
      }
      localStorage.clear();
      localStorage.messages = messages;
      localStorage.userNav = JSON.stringify(userNav);
      localStorage.locale = locale;
    }
    if (localStorage.locale) {
      locale = localStorage.locale;
    }

    this.reloadCaptcha();

    this.$store.dispatch("loadMessages", {lang: locale});
    document.title = "请登录";
    this.initLoginData();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.login {
  /* background: linear-gradient(
    135deg,
    rgba(36, 46, 77, 0.9),
    rgba(137, 126, 121, 0.9)
  ); */
  background: url("/static/assets/backgroundImg.jpg") no-repeat center top /
    cover;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 1.5em;
  height: 100%;
}
.bg {
  background-color: #00d6b7 !important;
}

.form-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  background: rgba(51, 72, 119, 0.1);
  padding-top: 10px;
}

.brand {
  margin: 0 auto 10px;
  background-position: center;
  background-image: url("/static/assets/logo.png");
  background-size: 240px 60px;
  background-repeat: no-repeat;
  width: 280px;
  text-align: center;
  height: 60px;
  display: block;
  /* position: absolute; */
  /* margin-top: 130px;
  margin-left: 70px; */
}

.login-form {
  width: 100%;
  padding: 40px 40px 10px 40px;
  position: relative;
  /* background: rgba(0, 0, 0, 0.15); */
  /* margin-top: 200px; */
}
.login-form:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 100%;
  /* background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#35c3c1),
    to(#00d6b7)
  ); */
  background: #409eff;
}
@media screen and (min-width: 600px) {
  .login-form {
    width: 50vw;
    max-width: 24em;
  }
}

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1em;
}

.lf--label {
  width: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #f5f6f8;
  cursor: pointer;
}

.lf--input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 1em;
  border: 0;
  color: #8f8f8f;
  font-size: 1rem;
}
.lf--input:focus {
  outline: none;
}
.lf--submit {
  display: block;
  padding: 1em;
  width: 100%;
  border: 0;
  color: #fff;
  background-color: #409eff;
  cursor: pointer;
  font-size: 0.75em;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.lf--remember {
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
  text-align: left;
}

.lf--forgot {
  margin-top: 1em;
  color: #00d6b7;
  font-size: 0.65em;
  text-align: center;
}

::-webkit-input-placeholder {
  color: #8f8f8f;
}

:-ms-input-placeholder {
  color: #8f8f8f;
}

::-ms-input-placeholder {
  color: #8f8f8f;
}

::placeholder {
  color: #8f8f8f;
}
</style>
